<template>
  <el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '通知'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
      <el-form-item prop="cron" label="Cron">
        <el-input v-model="dataForm.cron" :disabled="disabledStatus" placeholder="请输入定时表达式"> </el-input>
        <!-- <noVue3Cron :cron-value="state.cron" @change="changeCron" @close="state.cronPopover = false" max-height="400px" i18n="cn"></noVue3Cron> -->
      </el-form-item>
      <el-form-item>
        <RenCron @change="changeCron" i18n="cn"></RenCron>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">保存</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
const emit = defineEmits(["refreshDataList"]);
import RenCron from "@/components/ren-cron/index.vue";
//当前使用的页面引入
// import "vue3-cron-plus-picker/style.css";
// import { Vue3CronPlusPicker } from "vue3-cron-plus-picker";

const disabledStatus = ref(false);
const visible = ref(false);
const dataFormRef = ref();
const changeCron = (val: string) => {
  dataForm.cron = val;
  console.log(val);
};
const dataForm = reactive({
  id: "",
  cron: ""
});

const rules = ref({
  cron: [{ required: true, message: "必填项不能为空", trigger: "blur" }]
});

const init = (id?: any, cronValue?: any) => {
  visible.value = true;
  dataForm.id = "";

  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields();
  }

  if (id) {
    dataForm.id = id;
    dataForm.cron = cronValue;
  }
};

// 表单提交
const dataFormSubmitHandle = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false;
    }
    baseService.get(`/spider/cron/${dataForm.id}`, { cron: dataForm.cron }).then((res) => {
      ElMessage.success({
        message: "成功",
        duration: 500,
        onClose: () => {
          visible.value = false;
          emit("refreshDataList");
        }
      });
    });
  });
};

defineExpose({
  init
});
</script>
